<template>
  <basic-container :btnFlag=true>
    <div class="card-border">
      <card-header :header-data="headerData"></card-header>
      <el-form
        label-width="130px"
        :model="programForm"
        style="padding-right: 30px;"
        :rules="planOpinionRules"
        ref="programForm"
      >
        <el-row>
          <el-col :span="22" style="margin-top: 27px">
            <el-form-item class="form-item" label="方案名称 :" prop="titleTemp">
              {{titleTemp}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22" style="margin-top: 27px">
            <el-form-item class="form-item" label="征求主题 :" prop="title">
              <el-input v-model="programForm.title" placeholder="请输入征求主题"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="征求部门 :" prop="orgCode" class="form-item">
              <span style="font-size: 16px">{{itemUnits}},{{programForm.deptName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button size="small" type="primary" icon="el-icon-plus" style="margin-left: 10px;"
                       @click="clickjointassortEditDept">选择增加征求部门
            </el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item class="form-item" label="征求说明 :" prop="content">
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4}"
                v-model="programForm.content"
                placeholder="请输入有关说明"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item class="form-item" label="截止时间 :" prop="endDate">
              <el-date-picker
                style="width: 100%"
                v-model="programForm.endDate"
                type="date"
                placeholder="选择截止时间"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                :picker-options="expireTimeOption"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item class="form-item-release" label="相关材料 :">
              <el-upload
                class="upload-demo"
                ref="uploadrelated"
                action="string"
                :http-request="submitUploadMixin"
                :on-preview="handlePreviewMixin"
                :on-remove="handleRemoveMixin"
                :file-list="fileListMixin"
                :auto-upload="true">
                <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="btn-footer">
        <el-button type="primary" @click="submitToOpinion()">发 送</el-button>
        <el-button @click="cancel()">取 消</el-button>
      </div>
      <dept-check :visible="deptVisible" mini-type="2" @getCheckInfo="getCheckInfo" @cancel="cancelSupportDept"></dept-check>
    </div>
  </basic-container>
</template>

<script>
  import {addProgramOpinion,getItemUnits} from "@/api/pim/pim";
  import {filedownload} from "@/api/system";
  import {planOpinionRules} from "@/const/infoRules";
  import relatedfile from "@/mixins/relatedfile";

  export default {
    name: "programOpinion",
    mixins: [relatedfile],
    created() {
      this.titleTemp = this.$route.query.title+'分解方案（征求意见稿）';
      this.programForm.title =this.$route.query.orgName+"关于征求《" + this.$route.query.title + "责任分解方案（征求意见稿）》意见的函";
      this.getItemUnits();
    },
    data() {
      return {
        headerData: {
          title: '责任分解-征求意见'
        },
        planOpinionRules:planOpinionRules,
        programForm: {
          title: '',
          content: '',
          planId: 0,
          endDate: '',
          deptIds: [],
          fileIds: [],
          deptName: '',
        },
        titleTemp: '',
        deptVisible: false,
        expireTimeOption: {
          disabledDate(date) { //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
            return date.getTime() <= Date.now();
          }
        },
        itemUnits:'',

      }
    },
    methods: {
      // 弹出协同部门弹框
      clickjointassortEditDept() {
        this.deptVisible = true
      },
      cancelSupportDept(deptIds, deptNames) {
        this.deptVisible = false;
      },
      getCheckInfo(deptIds, deptNames) {
        this.programForm.deptName = deptNames;
        this.programForm.deptIds = deptIds.split(",");
        this.deptVisible = false;
      },
      cancel() {
        this.$router.go(-1)
      },
      submitToOpinion() {
        this.$refs.programForm.validate(valid => {
          if (valid) {
            this.$confirm("确定征求意见吗?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              this.programForm.draftId = this.$route.params.id;

              var arr = [];
              for (var item in this.fileListMixin) {
                arr.push(this.fileListMixin[item].url);
              }
              this.programForm.fileIds = arr;
              addProgramOpinion(this.programForm).then(response => {
                if (response.data.code == 0) {
                  this.$notify({
                    title: '成功',
                    message: '征求意见发送成功',
                    type: 'success',
                    duration: 2000
                  });
                  this.$router.go(-1)
                }
              })
            })
          }
        })
      },
      getItemUnits(){
        getItemUnits(this.$route.params.id).then(response =>{
          this.itemUnits = response.data.data;
        })
      },
    }

  }
</script>

<style lang="scss" scoped>
  .btn-footer {
    text-align: center;
    margin-bottom: 20px;
  }
  .form-item{
    font-weight: 600;
  }
</style>
